<template>
	<view>
		<!-- 搜索栏 -->
		<searchBar />
		<!-- 顶部一个tab栏 -->
		<view class="filter_condition">
			<!-- 这个我吧类名调转了 -->
			<text :class="active === index ? 'click_filter_item ' : 'filter_item'" v-for="(item, index) in ['综合', '销量', '价格']" :key="index" @click="toggleClass(index)">
				{{ item }}
			</text>
		</view>
		<!-- 商品列表 -->
		<view v-if="goods.length===0" class="noGoods">商品正在准备中,过段时间再来吧</view>
		<scroll-view :scroll-y="true" :enhanced="true" @scrolltolower="handlerScrollB"  style="height:calc(100vh - 100rpx)" v-show="active === 0" :lower-threshold="100">
			<goodsItem  v-for="(item, index) in goods" :key="index" :goods_id='item.goods_id' :goods_name="item.goods_name" :goods_small_logo="item.goods_small_logo" :goods_price="item.goods_price"/>
			<view class="noData" v-show="isnoData">已经没有数据了!!!</view>
		</scroll-view>
		<!-- 销量没有数据所以我没做 -->
		<!-- 价格列表 -->
		<scroll-view :scroll-y="true" :enhanced="true" @scrolltolower="handlerScrollB" style="height:calc(100vh - 100rpx)" v-show="active === 2" :lower-threshold="100">
			<goodsItem  v-for="(item, index) in price_goods" :key="index" :goods_id='item.goods_id' :goods_name="item.goods_name" :goods_small_logo="item.goods_small_logo" :goods_price="item.goods_price"/>
			
			<!-- <view class="lodingData" v-show="isLoading">正在加载中...</view> -->
			<view class="noData" v-show="isnoData">已经没有数据了!!!</view>
		</scroll-view>
	</view>
</template>

<script>
import searchBar from '@/components/searchBar.vue';
import goodsItem from '@/components/goodsItem.vue'
import { get } from '@/uilts/http.js';
export default {
	components: {
		searchBar,goodsItem
	},
	data() {
		return {
			query: '', //其他页面传过来的关键词
			cid: '', //传过页面传过来的id值
			active: 0, //默认选中的tab栏值
			pageIndex: 1, //当前的列表的页码
			pageSize: 10, //一页显示的条数
			goodslist: {}, //请求获取的数据,他的长度是作为能否再请求的标准
			goods: [""], //渲染到页面上的数据,
			price_goods: [], //价格列表
			// 页面拉下的数据
			isSort: true, //控制价格升序降序开关
			// isLoading: false,
			isnoData: false,
			isGoodsNone:false,
		};
	},
 async onLoad(params) {
			uni.showLoading({
				title:"拼命加载中"
			})
		this.query = params.query;
		// 有可能没有传id给我的
		if (params.cid) {
			this.cid = params.cid;
		}
		// 调用获取列表函数
		await this.getGoodsList();
		// 再把里面的值赋给goods 渲染到页面上
		this.goods = this.goodslist.goods;
		uni.hideLoading()
	},
	methods: {
		// 滑动到底部触发
		async handlerScrollB(){
			 // 加载更多条数 就需要获取数据再push进之前的数组,问题是,我要保持不刷新页面,又能动态加载
			     // 上次获取到的条数少于10条就不执行下拉获取
					if(this.goodslist.goods.length < 10){
						this.isnoData=true
						setTimeout(()=>{
							this.isnoData=false
						},1500);
						return
					}
					else{
						uni.showLoading({
						    title: '玩命加载中'
						});
						this.pageIndex++
						await this.getGoodsList()
						this.goods.push(...this.goodslist.goods)
						uni.hideLoading()
					}
		},
		// 点击tab栏切换class
		toggleClass(index) {
			this.active = index;
			if (index === 2) {
				// 点击tab栏的价格 做一个简单的价格排序
				if (this.isSort) {
					// 为升序
					this.price_goods=this.goods.sort((a,b)=>{
						return a.goods_price - b.goods_price;
					});
				} else {
					// 为降序
					this.price_goods=this.goods.sort((a,b)=>{
						return b.goods_price - a.goods_price;
					});
				}
			this.isSort=!this.isSort
			console.log(this.isSort)
			}
		},

		// 封装一个获取列表信息的请求函数
		async getGoodsList() {
			// 先要判定下cid是否为空
			let data = {};
			if (this.cid) {
				data.cid = this.cid;
			}
			data.query = this.query;
			data.pagenum = this.pageIndex;
			data.pagesize = this.pageSize;
			let res = await get('/goods/search', data);
			console.log(res.data.message);
			if (res.data.meta.status) {
				this.goodslist = res.data.message;
			}
		}
	}
};
</script>

<style lang="less">
.searchView {
	width: 750rpx;
	height: 100rpx;
	background-color: #7d00ff;
	padding: 10rpx, 24rpx;
}
.input_search {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 700rpx;
	height: 80rpx;
	margin: 0 auto;
	background-color: #fff;
	color: #767676;
	font-size: 26rpx;
}
.filter_condition {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 88rpx;
	background-color: #fff;
}
.filter_item {
	color: #3d3d3d;
	font-size: 30rpx;
	padding: 23rpx 59rpx;
}
.click_filter_item {
	color: #7d00ff;
	font-size: 30rpx;
	padding: 23rpx 59rpx;
	border-bottom: 3px solid #7d00ff;
}
.goods_item {
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	width: 698rpx;
	height: 209rpx;
	padding: 20rpx 26rpx;
	/* background-color: #ff0; */
}
.goods_img_container {
	width: 191rpx;
	height: 191rpx;
}
.goods_text_container {
	width: 463rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.goods_title {
	font-size: 24rpx;
	line-height: 33rpx;
	color: #434343;
}
.goods_pirce {
	font-size: 24rpx;
}
.dollar {
	font-size: 18rpx;
	color: #7d00ff;
}
.lodingData {
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
}
.noData {
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
}
.noGoods{
	text-align: center;
	margin-top: 100rpx;
	font-size: 36rpx;
	color: #7d00ff;
}
</style>
